<template>
	<view>
		<block v-if="type!='my'">
			<view class="items" v-for="(item,index) in classesList" :key="index" @click="openDetail(item)">
				<view class="">
					<u-image width="702" height="400" :src="item.image" radius="20rpx 20rpx 0 0"></u-image>
				</view>
				<view class="info">
					<view class="title">{{item.name}}</view>
					<view class="kbsj">
						<u-icon name="clock" size="32" color="#999999"></u-icon>
						<text>开班时间 {{item.starttime_text}} 至 {{item.endtime_text}}</text>
					</view>

					<view class="bmxx">
						<u-icon name="clock" size="32" color="#999999"></u-icon>
						<text>报名时间 {{item.regstarttime_text}} 至 {{item.regendtime_text}}</text>
					</view>
					<view class="bmxx">
						<u-icon name="account" size="32" color="#999999"></u-icon>
						<text>{{item.reg_order}} 人报名</text>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="items" v-for="(item,index) in classesList" :key="index">
				<view class=""  @click="openDetail(item)">
					<u-image width="702" height="400" :src="item.classes.image" radius="20rpx 20rpx 0 0"></u-image>
				</view>
				<view class="info">
					<view class="title">{{item.classes.name}}</view>
					<view class="kbsj">
						<u-icon name="clock" size="32" color="#999999"></u-icon>
						<text>开班时间 {{item.classes.starttime_text}} 至 {{item.classes.endtime_text}}</text>
					</view>

					<view class="bmxx">
						<u-icon name="clock" size="32" color="#999999"></u-icon>
						<text>报名时间 {{item.classes.regstarttime_text}} 至 {{item.classes.regendtime_text}}</text>
					</view>
					<view class="bmxx">
						<u-icon name="account" size="32" color="#999999"></u-icon>
						<text>{{item.classes.reg_order}} 人报名</text>
					</view>
					<view class="status-btn u-text-right" v-if="item.auditstatus==1 && item.paystatus==0">
						<text class="pay-btn" @click="pay(item)">去支付</text>
					</view>
					<view class="status-btn" v-if="item.auditstatus==2" >
						<text  class="ban-text">审核不通过原因：{{item.auditreson}}</text>
					</view>
				</view>
			</view>
		</block>
	
	</view>
</template>

<script>
	export default {
		name: "fa-training-item",

		props: {
			classesList: {
				type: Array,
				default: []
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		methods: {

			openDetail(item) {
				uni.$u.route({
					url: '/pages/training/detail',
					params: {
						classes_id: item.id
					},
				})
				return
			},
			pay(item){
				this.$emit('goPay',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.items {
		margin-top: 24rpx;

		.info {
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			padding: 24rpx;

			.title {
				width: 291rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-bottom: 16rpx;
			}

			.kbsj {
				display: flex;
				align-items: center;

				text {
					margin-left: 16rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.bmxx {
				margin-top: 14rpx;
				display: flex;
				align-items: center;

				text {
					margin-left: 16rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}
			.status-btn{
				margin-top: 16rpx;
				.pay-btn{
				
					padding: 6rpx 12rpx;
					background-color: #CBF1D8;
					color: #47A467;
					font-size: 24rpx;
					border-radius: 10rpx;
				}
				.ban-text{
					display: block;
					font-size: 24rpx;
					background-color: #fef0f0;
					color: #f57171;
					padding: 6rpx 12rpx;
					border-radius: 10rpx;
					
				}
			}
		}
	}
</style>